<template>
  <div class="dashboard">
    <div class="header">
      <div class="title-container">
        <h1>合肥市网络舆情可视化系统</h1>
        <div class="title-decoration"></div>
      </div>
    </div>
    
    <div class="main-content">
      <div class="top-stats">
        <stat-card title="行政区数量" :value="13"/>
        <stat-card title="正面网络舆情" :value="40744"/>
        <stat-card title="负面网络舆情" :value="10688"/>
        <stat-card title="中性网络舆情" :value="64650"/>
        <stat-card title="舆情总量" :value="172180"/>
      </div>
      
      <div class="content-wrapper">
        <div class="left-panel">
          <hot-regions-chart />
          <sentiment-trend-chart />
        </div>
        
        <div class="center-panel">
          <hefei-map />
        </div>
        
        <div class="right-panel">
          <sentiment-distribution />
          <sentiment-trend-line />
          <hot-topics-cloud />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StatCard from '@/components/StatCard.vue'
import HotRegionsChart from '@/components/HotRegionsChart.vue'
import SentimentTrendChart from '@/components/SentimentTrendChart.vue'
import HefeiMap from '@/components/HefeiMap.vue'
import SentimentDistribution from '@/components/SentimentDistribution.vue'
import SentimentTrendLine from '@/components/SentimentTrendLine.vue'
import HotTopicsCloud from '@/components/HotTopicsCloud.vue'

export default {
  name: 'Dashboard',
  data() {
    return {
      charts: []
    }
  },
  mounted() {
    // 收集所有图表实例
    this.charts = this.$children
      .filter(child => child.chart)
      .map(child => child.chart)
    
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.charts.forEach(chart => {
        chart.resize()
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  components: {
    StatCard,
    HotRegionsChart,
    SentimentTrendChart,
    HefeiMap,
    SentimentDistribution,
    SentimentTrendLine,
    HotTopicsCloud
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0f1c3c;
  color: white;
  padding: 10px;
  box-sizing: border-box;

  .header {
    text-align: center;
    margin-bottom: 10px;
    flex: 0 0 auto;
    padding: 15px 0;
    position: relative;
    
    .title-container {
      display: inline-block;
      position: relative;
      padding: 0 30px;
      
      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 20px;
        height: 2px;
        background: linear-gradient(to right, transparent, #1890ff);
      }
      
      &::before {
        left: 0;
        transform: translateY(-50%);
      }
      
      &::after {
        right: 0;
        transform: translateY(-50%) rotate(180deg);
      }
    }

    h1 {
      font-size: 28px;
      color: #fff;
      font-weight: 700;
      text-shadow: 0 0 15px rgba(24, 144, 255, 0.5);
      letter-spacing: 2px;
      margin: 0;
      background: linear-gradient(to bottom, #ffffff, #88c4ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
    }

    .title-decoration {
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 40%;
      height: 2px;
      background: linear-gradient(to right, 
        transparent, 
        rgba(24, 144, 255, 0.8),
        #1890ff,
        rgba(24, 144, 255, 0.8),
        transparent
      );
    }
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;

    .top-stats {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      padding: 0;
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      flex: 0 0 auto;
    }

    .content-wrapper {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 25% 50% 25%;
      gap: 10px;
      
      .left-panel, .right-panel {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
      }

      .right-panel {
        > :nth-child(1) {
          flex: 2.5;
        }
        > :nth-child(2) {
          flex: 3.5;
        }
        > :nth-child(3) {
          flex: 3;
        }
      }

      .left-panel {
        > * {
          flex: 1;
        }
      }

      .center-panel {
        min-height: 0;
      }
    }
  }
}
</style> 